<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="./canvas-datagrid.debug.js"></script>
  <style type="text/css">
    
  </style>

  <script type="text/javascript">
    window.addEventListener('load', function () {
        var parentNode = document.getElementById('grid');
        var grid = document.createElement('canvas-datagrid');
        grid.setAttribute('columnHeaderClickBehavior', 'select');
        parentNode.appendChild(grid);
        grid.data = [
          {col0: '0foo', col1: 'foo', col2: 0, col3: 'a', col4: 'test', col5: 'test2'},
          {col0: '1bar', col1: 'bar', col2: 1, col3: 'b', col4: 'test1', col5: 'test2'},
          {col0: '2baz', col1: 'baz', col2: 2, col3: 'c', col4: 'test2', col5: 'test2'},
          {col0: '3test', col1: 'test', col2: 3, col3: 'd', col4: 'test3', col5: 'test2'},
          {col0: '4data', col1: 'data', col2: 4, col3: 'e', col4: 'test4', col5: 'test2'}
        ];
        grid.schema = [
          {
            "name": "col0",
            "hidden": null,
          },
          {
            "name": "col1",
            "hidden": true,
          },
          {
            "name": "col2",
            "hidden": null
          },
          {
            "name": "col3",
            "hidden": true,
          },
          {
            "name": "col4",
            "hidden": true
          },
          {
            "name": "col5",
            "hidden": null
          }
        ];
        grid.columnOrder = [4, 5, 2, 1, 0, 3]; // if called, clicking on a x-axis header will select a full row.
        grid.addEventListener('selectionchanged', function () {
          console.log('change')
        });
    });
  </script>

</head>
<body>
  <div id="grid"></div>
</body>
</html>
